//剪裁区
//1.初始化
let $image = $("#image");
//2.配置项
let option = {
  // 纵横比(宽高比)裁剪比1:1 === 正方形
  aspectRatio: 1,
  // 指定预览区域
  preview: ".img-preview", // 指定预览区的类名（选择器）
};
// 3.调用cropper方法，创建剪裁区
//剪裁插件方法语法：image.cropper('方法名‘，...方法的参数)
$image.cropper(option);

//上传图片功能
$("#chooseFile").on("click", function () {
  $("#file").trigger("click");
});
$("#file").on("change", function () {
  if (this.files.length > 0) {
    //判断是否上传文件如果上传就获取上传文件，增加代码健壮性
    //console.dir()可以看到DOM对象结构
    //获取选择的文件对象this.files
    let fileObj = this.files[0];
    //URL.createObjectURL() 静态方法会创建一个包含参数中给出的对象的URL。
    let src = URL.createObjectURL(fileObj); //URL浏览器内置对象
    //destroy方法摧毁裁剪框并且移除cropper实例
    /*
    - replace(url[, hasSameSize]) 替换图片路径并且重建裁剪框 
             - url 新路径
             - hasSameSize 默认值false 设置为true表示新老图片尺寸一样 只需要更换路径无需重建裁剪框
    
    */
    $image.cropper("replace", src);
  }
});

//更换头像接口
$("#avatar").on("click", function () {
  // 1. 剪裁图片，得到canvas
  //getCroppedCanvas方法：得到被裁剪图片的一个canvas对象 options设置这个canvas的一些数据
  let canvas = $image.cropper("getCroppedCanvas", { width: 30, height: 30 });
  // 2. 把canvas转成base64格式字符串
  let base64 = canvas.toDataURL();
  //3. 调用接口
  $.ajax({
    type: "POST",
    url: "/my/user/avatar",
    data: {
      avatar: base64,
    },
    success: function (res) {
      layer.msg(res.message);
      window.parent.getUserinfo();
    },
  });
});
